<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
    
    <div>
      <label for="">
          ID: <input type="text" v-model="id">
      </label>

      <label for="">
          name: <input type="text" v-model="name">
      </label>

      <button @click="add">添加</button>
    </div>


  <!-- v-for 循环的时候 key 属性只能使用number或者string -->
  <!-- key值只能在v-for指令使用的地方之中使用 -->
	 <p v-for="item in list" :key="item.id">
        <input type="checkbox"> 
        {{item.id}}------{{item.name}}
   </p>


</div>



<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
    id:"",
    name:"",

    list:[
        {id:1,name:"李斯"},
        {id:2,name:"嬴政"},
        {id:3,name:"韩非"},
        {id:4,name:"荀子"},
    ]
  	
  },

  methods:{

          add(){
            this.list.unshift({ id:this.id,name:this.name })
            // this.list.push({ id:this.id,name:this.name })
          }
  	



  }
})





</script>

	
</body>
</html>